<template>
<div style="padding: 2% 3%;">


  <el-row>
    <el-button-group>
      <el-button type="info" :size='size' @click="addShow" :disabled="toggleShow">新增</el-button>
      <el-button type="info" :size='size' @click="editShow" :disabled="!toggleShow">修改</el-button>




    </el-button-group>
      <!-- 修改下拉框 -->
      <template v-if="!toggleShow" >
        <el-select style="margin-left: 1.25rem;" @change="editChange"  :size="size" v-model="value" placeholder="请选择延保名称" >
          <el-option
            v-for="item in options"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </template>
      <el-button :size="size" icon="el-icon-close" @click="qingkong" v-if="!toggleShow" circle></el-button>

  </el-row>


  <!-- 新增 -->
  <el-row v-if="toggleShow" >
     <el-divider></el-divider>
     <!-- 改成行类表单  :inline="true"  -->
    <el-form ref="form1"  :inline="true" :rules="rules" :model="form" label-width="120px" >
        <el-form-item label="日期" prop="date">
         <el-date-picker style="width: 94%;"
              v-model="form.date"
              type="date"
              placeholder="选择日期">
            </el-date-picker>
        </el-form-item>
         <br />
        <br />
        <el-form-item label="服务顾问">
           <el-input :size="size" style="width:102%;" v-model="form.fuWuGuWen" clearable>
           </el-input>
        </el-form-item>

        <el-form-item label="维修班组">
           <el-input :size="size" style="width:102%;" v-model="form.weiXiuGroup" clearable>
           </el-input>
        </el-form-item>
        <el-form-item label="维修技师">
           <el-input :size="size" style="width:100%;" v-model="form.weiXiuJiSHi" clearable>
           </el-input>
        </el-form-item>
        <el-form-item label="车牌号码">
           <el-input :size="size" style="width:100%;" v-model="form.chePaiNum" clearable>
           </el-input>
        </el-form-item>
        <div style="margin-top: 0.9375rem;">

            <el-form-item label="车型">
                <el-select v-model="form.cheXing" placeholder="请选择">
                   <el-option
                     v-for="item in options"
                     :key="item.value"
                     :label="item.label"
                     :value="item.value"
                     :disabled="item.disabled">
                   </el-option>
                 </el-select>
            </el-form-item>
             <el-form-item label="车龄">
                 <el-select v-model="form.cheAge" placeholder="请选择">
                    <el-option
                      v-for="item in options2"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                      :disabled="item.disabled">
                    </el-option>
                  </el-select>
             </el-form-item>
            <el-form-item label="能源类型">
                <el-select v-model="form.type" placeholder="请选择">
                   <el-option
                     v-for="item in options3"
                     :key="item.value"
                     :label="item.label"
                     :value="item.value"
                     :disabled="item.disabled">
                   </el-option>
                 </el-select>
            </el-form-item>
            <el-form-item label="保险天数">
                <el-select v-model="form.baoXianDays" placeholder="请选择">
                   <el-option
                     v-for="item in options4"
                     :key="item.value"
                     :label="item.label"
                     :value="item.value"
                     :disabled="item.disabled">
                   </el-option>
                 </el-select>
            </el-form-item>
        </div>

         <div style="margin-top: 1.5rem;" >
            <el-form-item label="维修类别" prop="roles">
               <el-select v-if="showTree" clearable
                  v-model="form.weiXiuLeiXing"
                  multiple
                  collapse-tags
                  style="width: 100%;"
                  placeholder="请选择">
                  <el-option-group
                    v-for="group in option5"
                    :key="group.label"
                    :label="group.label">
                  <el-option
                    v-for="item in group.options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                  </el-option-group>
                </el-select>
            </el-form-item>

            <el-form-item label="配件类别" prop="roles">
               <el-select v-if="showTree" clearable
                  v-model="form.peiJianLeiBie"
                  multiple
                  collapse-tags
                  style="width: 100%;"
                  placeholder="请选择">
                  <el-option
                    v-for="item in option6"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="配件收入" prop="roles">
               <el-select v-if="showTree" clearable
                  v-model="form.peiJianShouRu"
                  multiple
                  collapse-tags
                  style="width: 100%;"
                  placeholder="请选择">
                  <el-option
                    v-for="item in option7"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="工时收入" prop="roles">
               <el-select v-if="showTree" clearable
                  v-model="form.gongShiShouRu"
                  multiple
                  collapse-tags
                  style="width: 100%;"
                  placeholder="请选择">
                  <el-option
                    v-for="item in option8"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
            </el-form-item>

            <div style="margin-top: 1.5rem;">
            <el-form-item label="外协公司">
               <el-input :size="size" style="width:102%;" v-model="form.waiXieGongSi" clearable>
               </el-input>
            </el-form-item>
            <el-form-item label="外协成本">
               <el-input :size="size" style="width:102%;" v-model="form.waiXieChengBen" clearable>
               </el-input>
            </el-form-item>
            </div>

         </div>



        <!-- 用br换行 或者div  -->
         <br />
        <div style="margin-top: 1.5rem;" >


        </div>
    </el-form>
    <el-divider></el-divider>
    <el-button type="primary" style="float: right;" :size='size' @click="save" >保存</el-button>
  </el-row>


   <!-- 修改 -->
  <el-row v-if="!toggleShow">
     <el-divider></el-divider>
    <span v-if="!value">请选择延保名称</span>
    <!-- 根据下拉框是否有值 显示 -->
    <div v-if="value">
      <el-form ref="form1" :inline="true" :rules="rules" :model="form" label-width="120px" >
          <el-form-item label="延保名称" prop="name" >
            <el-input clearable v-model="form.name"></el-input>
          </el-form-item>
           <br />
          <div style="margin-top: 1.5rem;" >
          <el-form-item label="延保价格(元)">
            <el-input-number  :size="size" style="width:100%;" controls-position="right" :precision="2" :step="0.1" :min="0" v-model="form.price">
            </el-input-number>
          </el-form-item>
          <el-form-item label="延保成本(元)">
             <el-input-number :size="size" style="width:100%;" controls-position="right" :precision="2" :step="0.1" :min="0" v-model="form.cost">
             </el-input-number>
          </el-form-item>
          </div>

      </el-form>
      <el-divider></el-divider>
        <el-button type="primary" style="float: right;" :size='size' @click="save" >保存</el-button>
    </div>
  </el-row>


</div>
</template>

<script>
  export default{
    data() {
      return {
       size:'medium',
        showTree:true,
       //切换新增修改显示
       toggleShow:true,

       form:{

       },
       //修改下拉框的值
       options:
          [{
            value: '本品牌',
            label: '本品牌'
           },{
            value: '外品牌',
            label: '外品牌'

          }]
       ,
       options2:
          [{
            value: '1天',
            label: '1天'
           },{
            value: '2天',
            label: '2天'
           },{
            value: '3天',
            label: '3天'
           },{
            value: '4天',
            label: '4天'
           },{
            value: '5天',
            label: '5天'
           },{
            value: '6天',
            label: '6天'
           },{
            value: '7天',
            label: '7天'
           },{
            value: '8天',
            label: '8天'
           },{
            value: '9天',
            label: '9天'
           },
           {
             value: '10天',
             label: '10天'
            },{
            value: '∞天',
            label: '∞天'
           },]
            ,
           options3:
              [{
                value: '燃油车',
                label: '燃油车'
               },{
                value: '新能源车',
                label: '新能源车'

              }],
          option5:[
                    {
                       label: '保养类别',
                       options: [{
                         value: '首保',
                         label: '首保'
                       }, {
                         value: '定保',
                         label: '定保'
                       }, {
                         value: '免保',
                         label: '免保'
                       }, {
                         value: '套餐',
                         label: '套餐'
                       }]
                     },
                     {
                        label: '机电类别',
                        options: [{
                          value: '维修',
                          label: '维修'
                        }, {
                          value: '索赔&召回',
                          label: '索赔&召回'
                        }, {
                          value: '免检',
                          label: '免检'
                        }, {
                          value: '事故',
                          label: '事故'
                        }, {
                          value: 'PDI',
                          label: 'PDI'
                        }]
                      },
                      {
                         label: '钣喷类别',
                         options: [{
                           value: '保险钣金&油漆',
                           label: '保险钣金&油漆'
                         }, {
                           value: '保险钣金',
                           label: '保险钣金'
                         }, {
                           value: '保险油漆',
                           label: '保险油漆'
                         }, {
                           value: '自费钣金&油漆',
                           label: '自费钣金&油漆'
                         }, {
                           value: '自费钣金',
                           label: '自费钣金'
                         }, {
                           value: '自费油漆',
                           label: '自费油漆'
                         }, {
                           value: '索赔&召回',
                           label: '索赔&召回'
                         }]
                       },
                      {
                         label: '洗美类别',
                         options: [{
                           value: '洗车',
                           label: '洗车'
                         }, {
                           value: '保险钣金',
                           label: '保险钣金'
                         }, {
                           value: '保险油漆',
                           label: '保险油漆'
                         }, {
                           value: '自费钣金&油漆',
                           label: '自费钣金&油漆'
                         }, {
                           value: '自费钣金',
                           label: '自费钣金'
                         }, {
                           value: '自费油漆',
                           label: '自费油漆'
                         }, {
                           value: '索赔&召回',
                           label: '索赔&召回'
                         }]
                       }
               ],
               option6:
                  [{
                    value: '油液类',
                    label: '油液类'
                   },{
                    value: '零件',
                    label: '零件'
                    },{
                     value: '养护品',
                     label: '养护品',
                     },{
                     value: '精品',
                     label: '精品',
                     },{
                     value: '轮胎',
                     label: '轮胎',
                     },{
                     value: '漆类',
                     label: '漆类',
                     },{
                     value: '低值易耗品',
                     label: '低值易耗品',
                    }
             ],
             option6:
                  [{
                    value: '油液类',
                    label: '油液类'
                   },{
                    value: '零件',
                    label: '零件'
                    },{
                     value: '养护品',
                     label: '养护品',
                     },{
                     value: '精品',
                     label: '精品',
                     },{
                     value: '轮胎',
                     label: '轮胎',
                     },{
                     value: '漆类',
                     label: '漆类',
                     },{
                     value: '低值易耗品',
                     label: '低值易耗品',
                    }
             ], option7:
                  [{
                    value: '保养',
                    label: '保养'
                   },{
                    value: '机电',
                    label: '机电'
                    },{
                     value: '保险&事故',
                     label: '保险&事故',
                     },{
                     value: '索赔&召回',
                     label: '索赔&召回',
                     },{
                     value: '新车准备',
                     label: '新车准备',
                     }
             ], option8:
                  [{
                    value: '保养',
                    label: '保养'
                   },{
                    value: '机电',
                    label: '机电'
                    },{
                     value: '保险&事故',
                     label: '保险&事故',
                     },{
                     value: '索赔&召回',
                     label: '索赔&召回',
                     },{
                     value: '新车准备',
                     label: '新车准备',
                     }
             ],



       //修改下拉框选择之后存的值
       value:'',
       rules:{
         date:[{ required: true, message: '请输入日期', trigger: 'blur' }],
         fuWuGuWen:[{ required: true, message: '请输入服务顾问', trigger: 'blur' }],
         weiXiuGroup:[{ required: true, message: '请输入服务顾问', trigger: 'blur' }],
       }
      }
    },
    computed:{
      options4(){
        var arr=[];
        for(var i=1;i<=365;i++){
            arr.push({value:i,lable:i+'天'})
        }
        return arr;
      }
    },
    methods:{

      //切换v-if
      addShow(){
        console.log(this.form);
        this.toggleShow=true
         emptyObj(this.form)
         this.value='';
      },
      editShow(){
        this.value='';
        this.toggleShow=false
         emptyObj(this.form)
         this.editOptions();

      },

       //查找修改下拉框的值赋给options
      editOptions(){
        this.$ajax.post("/",{}).then(res=>{
          var result = res.data;
          if(result.success){
            this.options=result.data.rows
          }
        })
      },

      //保存
      save(){
        this.$refs.form1.validate(valid=>{
          if(valid){

            this.$ajax.post("afterSalefront/save",this.form).then(res=>{
              var result = res.data;
              if(result.success){
                this.$notify({
                  title: '提示',
                  message: '数据保存成功',
                  type: 'success',
                  position: 'bottom-right'
                });
                emptyObj(this.form)
                this.editOptions();
                this.value='';
              }
            })

          }
        })
      },

    //选择下拉框
    editChange(){
      this.$ajax.post("yanbao/findbyId",{id:this.value}).then(res=>{
          var result = res.data;
          if(result.success){
            this.form=result.data;
          }
      })
    },

    //点击下拉框×
   qingkong(){
      this.value='';
    }

    }
  }


  function emptyObj(obj){
    if(obj.file){
      console.log(11)
      obj.file=""
    }
    for( var key in obj){
      var o = obj[key];
      if(o instanceof Object){
        emptyObj(o);
      }else{
        obj[key]='';
      }
    }
  }
</script>

<style>
</style>
